<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { Task } from '@/api/dispatch/taskpool/types'
import {
  ElButton,
  ElCollapse,
  ElCollapseItem,
  ElDatePicker,
  ElInput,
  ElLink,
  ElTag
} from 'element-plus'
import { Table, TableColumn } from '@/components/Table'
import { useI18n } from '@/hooks/web/useI18n'
import { useEventBus } from '@/hooks/event/useEventBus'
import { getTaskDetailApi } from '@/api/dispatch/taskpool'
import Feedback from '../Feedback/Feedback.vue'
import Assign from '../AssignUser/Assign.vue'
import Team from '../WorkTeam/Team.vue'
import Need from '../Need/Need.vue'

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<Task>>,
    default: () => null
  }
})

const { t } = useI18n()

const { required, lengthRange } = useValidator()

const formSchema = reactive<FormSchema[]>([
  {
    field: 'ticket_id',
    label: '工单号',
    colProps: {
      span: 8
    }
  },
  {
    field: 'ao_id',
    label: 'AO编号',
    colProps: {
      span: 8
    }
  },
  {
    field: 'ao_type',
    label: 'AO类型',
    colProps: {
      span: 8
    }
  },
  {
    field: 'ao_name',
    label: 'AO名称',
    colProps: {
      span: 8
    }
  },
  {
    field: 'product_type',
    label: '机型',
    colProps: {
      span: 8
    }
  },
  {
    field: 'flight',
    label: '架次',
    colProps: {
      span: 8
    }
  },
  {
    field: 'station',
    label: '工位',
    colProps: {
      span: 8
    }
  },
  {
    field: 'sub_station',
    label: '二级工位',
    colProps: {
      span: 8
    }
  },
  {
    field: 'position',
    label: '站位',
    colProps: {
      span: 8
    }
  },
  {
    field: 'team',
    label: '班组',
    colProps: {
      span: 8
    }
  },
  {
    field: 'team_leader',
    label: '班组长',
    colProps: {
      span: 8
    }
  },
  {
    field: 'status',
    label: 'AO状态',
    colProps: {
      span: 6
    }
  },
  {
    field: 'divider',
    label: '',
    component: 'Divider'
  },
  {
    field: 'in_daily_plan',
    label: '日计划',
    colProps: {
      span: 4
    },
    formItemProps: {
      slots: {
        default: (data: any) => {
          return (
            <>
              {data?.in_daily_plan ? (
                <ElTag type="success">√</ElTag>
              ) : (
                <ElTag type="danger">x</ElTag>
              )}
            </>
          )
        }
      }
    }
  },
  {
    field: 'in_weekly_plan',
    label: '周计划',
    colProps: {
      span: 4
    },
    formItemProps: {
      slots: {
        default: (data: any) => {
          return (
            <>
              {data?.in_weekly_plan ? (
                <ElTag type="success">√</ElTag>
              ) : (
                <ElTag type="danger">x</ElTag>
              )}
            </>
          )
        }
      }
    }
  },
  {
    field: 'material_match',
    label: '物料配套',
    colProps: {
      span: 4
    },
    formItemProps: {
      slots: {
        default: (data: any) => {
          return (
            <>
              <ElLink href={'/logistics/delivery/detail?serNo=' + data.ticket_id} target="blank">
                {data?.material_match ? (
                  <ElTag type="success">√</ElTag>
                ) : (
                  <ElTag type="danger">x</ElTag>
                )}
              </ElLink>
            </>
          )
        }
      }
    }
  },
  {
    field: 'delivery_message',
    label: '配送通知',
    colProps: {
      span: 4
    },
    formItemProps: {
      slots: {
        default: (data: any) => {
          return (
            <>
              {data?.delivery_message ? (
                <ElTag type="success">√</ElTag>
              ) : (
                <ElTag type="danger">x</ElTag>
              )}
            </>
          )
        }
      }
    }
  },
  {
    field: 'pi',
    label: '质保标注',
    colProps: {
      span: 4
    },
    formItemProps: {
      slots: {
        default: (data: any) => {
          return <>{data?.pi ? <ElTag type="success">√</ElTag> : <ElTag type="danger">x</ElTag>}</>
        }
      }
    }
  },
  {
    field: 'plan_start',
    label: '计划开始日期',
    colProps: {
      span: 12
    }
  },
  {
    field: 'plan_end',
    label: '预计归档日期',
    colProps: {
      span: 12
    }
  },
  {
    field: 'start',
    label: '实际开工时间',
    colProps: {
      span: 12
    }
  },
  {
    field: 'end',
    label: '实际归档日期',
    colProps: {
      span: 12
    }
  },
  {
    field: 'divider',
    label: '',
    component: 'Divider'
  },
  {
    field: 'group1',
    label: '标签',
    colProps: {
      span: 12
    },
    component: 'Input'
  },
  {
    field: 'order',
    label: '排序',
    colProps: {
      span: 12
    },
    component: 'Input'
  },
  {
    field: 'divider',
    label: '',
    component: 'Divider'
  },
  {
    field: 'sub_list',
    colProps: {
      span: 24
    },
    formItemProps: {
      slots: {
        default: (data) => {
          return (
            <>
              <ElCollapse class="w-full">
                <ElCollapseItem title="班组派工" name="Assign_Users">
                  <Assign data={data} ticketId={data.ticket_id} />
                </ElCollapseItem>
                <ElCollapseItem title="反馈问题" name="Evaluation_Report">
                  <Feedback data={data.feedback} ticketId={data.ticket_id} />
                </ElCollapseItem>
                <ElCollapseItem title="辅料信息" name="Supplement_Needs">
                  <Need data={data.needs} ticketId={data.ticket_id} />
                </ElCollapseItem>
                <ElCollapseItem title="外协信息" name="work_teams">
                  <Team data={data.work_teams} ticketId={data.ticket_id} />
                </ElCollapseItem>
              </ElCollapse>
            </>
          )
        }
      }
    }
  }
])

const rules = reactive({})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    return await getFormData()
  }
}
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  submit
})

useEventBus({
  name: 'updateTask',
  callback: async (ticketId) => {
    const res = await getTaskDetailApi({ ticket_id: ticketId })
    if (res) setValues(res.data)
  }
})
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" label-suffix=":" />
</template>

<style lang="less" scoped>
:deep(.el-collapse-item__header) {
  display: unset;
  font-size: 16px;
  font-weight: 600;
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
:deep(.el-form-item) {
  margin-bottom: 18px;
}
// :deep(.el-form-item__content) {
//   background-color: #f2f2f2;
// }
:deep(.content_wrap .el-form-item) {
  margin-bottom: 0;
}
</style>
